<template>
  <!-- 纠偏工单详情 -->
  <div class="detail_correct">
    <van-nav-bar title="纠偏工单明细" left-arrow @click-left="onClickLeft" />
    <div class="content">
      <van-panel>
        <div class="form" v-for="(item, index) in detailList" :key="index">
          <div class="form_title">{{ item.title }}</div>
          <div
            :class="its.type == 'remark' ? 'form_content_remark' : 'form_content'"
            v-for="(its, inds) in item.children"
            :key="inds"
          >
            <div class="label">{{ its.label }}</div>
            <div :class="its.type == 'remark' ? 'value_detail' : 'value'">
              <div>{{ contentForm[its.key] }}</div>
            </div>
          </div>
        </div>
        <template #footer>
          <van-button @click="onClickLeft">关闭</van-button>
        </template>
      </van-panel>
    </div>
  </div>
</template>
        
  <script>
import { detailList } from './common'

import store from '@/store/'
import { sql2apiAction, postAction } from '@/api/manage'

export default {
  name: 'correctionSideDetail',
  data() {
    return {
      detailList,
      id: null,
      contentForm: {},
    }
  },
  mounted() {
    this.id = this.$route.params.id
    this.getDetail()
  },
  methods: {
    onClickLeft() {
      this.$router.push({
        path: '/publicline/addressMisson/correctionSide',
      })
      store.commit('SET_ISACTIVE', null)
    },
    getDetail() {
      postAction('api/order/correctionDeviationsById', { id: this.id }).then((res) => {
        if (res.code == 1) {
          this.contentForm = res.data
        }
      })
    },
  },
}
</script>
  <style lang="less" scoped>
/deep/ .van-nav-bar {
  position: fixed;
  width: 100%;
  top: 0;
}
/deep/ .van-nav-bar__content {
  background: linear-gradient(134deg, #80d9f9 0%, #5466fa 100%);
}
/deep/ .van-nav-bar__title {
  font-size: 18px;
  color: #ffffff;
  letter-spacing: -0.6px;
  text-align: center;
}
/deep/ .van-nav-bar .van-icon {
  color: #fff;
  font-size: 20px;
}
/deep/ .van-tabs__line {
  width: 20px;
  margin-bottom: 3px;
}
/deep/ .van-tabs__nav--line {
  margin-bottom: 10px;
}
/deep/ .van-tab__text {
  font-size: 15px;
  color: #333333;
  letter-spacing: -0.53px;
}
/deep/ .van-panel__footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  padding: 0;
  z-index: 9;
}
/deep/ .van-button--default {
  background-color: #eee;
}
/deep/ .van-button {
  width: 100%;
  padding: 0;
}
/deep/ .van-panel {
  margin-top: 20px;
}
.content {
  padding-bottom: 46px;
  // padding-top: 20px;
  .form {
    .form_title {
      font-family: PingFangSC-Regular;
      margin-left: 20px;
      font-size: 16px;
      color: #000000;
      position: relative;
      margin-top: 10px;
    }
    // .form_title::before {
    //   content: '';
    //   width: 4px;
    //   height: 18px;
    //   position: absolute;
    //   top: 3px;
    //   left: -10px;
    //   background-color: #4d98ff;
    //   border: 1px solid #4d98ff;
    //   border-radius: 20px;
    // }
    .form_content {
      display: flex;
      padding: 10px 10px 0;
      border-bottom: 1px solid #e6e6e6;
      justify-content: space-between;
      font-size: 14px;
      .label {
        color: #333333;
        padding-left: 10px;
      }
      .value {
        color: #999999;
        padding-right: 10px;
        padding-bottom: 10px;
        max-width: 180px;
        // white-space: pre-wrap;
        word-break: break-all;
      }
    }
    .form_content_remark {
      padding: 10px 10px 0;
      font-size: 14px;
      .label {
        color: #333333;
        padding-left: 10px;
        margin-bottom: 10px;
      }
    }
  }
}
</style>
        